<!--
 * @description: 添加角色
 * @fileName: AddRoles
 * @author: 17076
 * @date: 2025/3/31-下午2:23
 * @version: V1.0.0
-->

<template>
  <cs-dialog
    :dialog="dialogOption"
    @onSubmit="save"
  >
    <div slot="content">
      <el-form ref="form" :model="infoForm" :rules="rules" label-width="80px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="infoForm['name']" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="声音" prop="voiceName">
          <el-input v-model="infoForm['voiceName']" disabled />
          <el-row :gutter="10" style="margin-top: 10px">
            <el-col
              v-for="(item, index) in toneList"
              :key="item.code"
              :span="6"
            >
              <div :class="['tone-item', selectToneIndex === index ? 'tone-item-active' : '']" @click="handleSelectTone(index)">{{ item.name }}</div>
            </el-col>
          </el-row>
          <el-row :gutter="10" style="margin-top: 10px">
            <el-col
              v-for="subItem in toneList[selectToneIndex]['child']"
              :key="subItem.code"
              :span="6"
            >
              <div :class="['flex-row', 'tone-sub-item', infoForm['voice'] === subItem.code ? 'tone-sub-item-active' : '']" @click="handleSelectSubItem(subItem)">
                <i class="el-icon-caret-right" @click.stop="handlePlay(subItem)" />
                <span style="margin-left: 10px">{{ subItem.name }}</span>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="角色描述" prop="remark">
          <el-input v-model="infoForm['remark']" type="textarea" :rows="5" placeholder="请输入角色描述" />
        </el-form-item>
      </el-form>
    </div>
  </cs-dialog>
</template>

<script>

import { addPlayRole } from '@/api/roles'

export default {
  name: 'AddRoles',
  props: {
    playId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogOption: {
        width: '520px',
        title: {
          title: '添加角色'
        },
        appendToBody: true,
        show: false
      },
      // 声音-音色
      toneList: JSON.parse(sessionStorage.getItem('voice')),
      // 当前选中的音色下标
      selectToneIndex: 0,
      infoForm: {},
      // 是否是编辑
      isEdit: false,
      rules: {
        name: [
          { required: true, message: '角色名称不能为空!', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 显示弹窗
    show(data, isEdit) {
      this.isEdit = isEdit
      this.infoForm = isEdit ? this.$baseLodash.cloneDeep(data) : {}
      this.dialogOption.title = {
        title: isEdit ? '编辑角色' : '添加角色'
      }
      this.dialogOption.show = true
    },
    // 声音选中
    handleSelectTone(index) {
      this.selectToneIndex = index
    },
    // 子音色选中
    handleSelectSubItem(item) {
      this.$set(this.infoForm, 'voice', item.code)
      this.$set(this.infoForm, 'voiceName', item.name)
    },
    // 声音播放
    handlePlay(item) {
      console.log(item, 7878)
    },
    save(callback) {
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          const { code, msg } = await addPlayRole({ ...this.infoForm, playId: this.playId })
          code === 200 ? this.$baseMessage.success(msg || '保存成功!') : this.$baseMessage.error(msg || '保存失败！')
          this.$emit('reload')
          callback(true)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.tone-item {
  border: 1px solid #6A778C;
  text-align: center;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  color: #B6C7D1;
  cursor: pointer;
  &:hover {
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
  }
  &-active {
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
  }
}
.tone-sub-item {
  background: #333B4A;
  border: 1px solid #333B4A;
  color: #999DA0;
  border-radius: 5px;
  padding: 1px 5px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  &:hover {
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
  }
  &-active {
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
  }
}
</style>
